<template>
<!-- 我的组件 -->
  <div class="my">
      <div class="back-nav-box">
          <div class="back-nav">
              <div class="nav-left"></div>
              <div class="nav-middle">个人中心</div>
              <div class="nav-right" @click="login">登录</div>
          </div>
      </div>
      <div class="my-datial" v-for="(item,index) in myArray"
          :key="index">
        <!-- 图片背景 -->
        <label for="photo">
          <div class="my-img" >
              <van-uploader id="photo" class="select-img" :after-read="afterRead" />
              <img class="auto-img" :src="item.userBg" alt="">
          </div>
        </label>
            <!-- 我的详情盒子 -->
          <div class="my-box">
              <div class="my-info">
                  <div class="my-pic">
                      <!-- 头像 -->
                <label for="pictures"> 
                      <van-uploader id="pictures" class="pic" :after-read="afterReads" />
                      <img class="auto-img" :src="item.userImg" alt="">
                </label>    
                  </div>
                  <div class="my-title">
                      <div class="my-name">
                            <input type="text" class="ipt-name" v-model="nickName"
                            @keyup.enter="updateNickName(nickName)">
                      </div>
                      <div class="my-log" contenteditable="true" 
                      @keyup.enter="updateDesc(desc)">
                          {{desc}}
                      
                      </div>
                  </div>
              </div>
              
          </div>
      </div>
      <div class="my-boxes">
          <div class="info-box info-item">
                  <div class="text">个人资料</div>
                  <div class="arrow" @click="jumpInfo">
                      <i class="fa fa-angle-right" aria-hidden="true"></i>
                  </div>
              </div>
              <div class="order-box info-item">
                  <div class="text">我的订单</div>
                  <div class="arrow" @click="jupmOrder">
                      <i class="fa fa-angle-right" aria-hidden="true"></i>
                  </div>
              </div>
              <div class="collect-box info-item">
                  <div class="text">我的收藏</div>
                  <div class="arrow" @click="jumpCollect">
                      <i class="fa fa-angle-right" aria-hidden="true"></i>
                  </div>
                  
              </div>
              <div class="address-box info-item">
                  <div class="text">地址管理</div>
                  <div class="arrow" @click="jumpSite">
                      <i class="fa fa-angle-right" aria-hidden="true"></i>
                  </div>
                 
              </div>
              <div class="save-box info-item">
                  <div class="text">设置</div>
                  <div class="arrow" @click="jupmInstall">
                      <i class="fa fa-angle-right" aria-hidden="true"></i>
                  </div>
              </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'My',
   
    data() {
        return {
          flag: false,
          myArray: [],
          desc: '这家伙很懒,什么也没有留下!',
          nickName:'allen' 
        }
    },
    created() {
        this.findMy();
    },
    methods: {
         //上传头像
        afterReads(file) {
            // 
            let content=file.content;
            //处理base64位图片
            content=content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
            let imgType=file.file.type;
            imgType=imgType.substring(6);
            this.axios({
                method: 'post',
                url: '/updateAvatar',
                data: {
                    imgType: imgType,
                    serverBase64Img: content
                }
            }).then(res=>{
                this.$toast(res.data.msg);
                let userImg=res.data.userImg;
                this.myArray.forEach(v=>{
                    for(let key in v) {
                        if(key=='userImg') {
                            
                            v[key]=userImg;
                        }
                    }
                })
                //更新上传后的头像图片
                this.findMy();
            })
        },

        //上传背景
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            // 
            let content=file.content;
            //图片数据处理获取base64位
            content=content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
            let imgType=file.file.type;
            //裁切图片类型
            imgType=imgType.substring(6);
            this.axios({
                method: 'post',
                url: '/updateUserBg',
                data: {
                    imgType: imgType,
                    serverBase64Img: content,
                }
            }).then(res=>{
                // 
                this.$store.commit('setMyPicture',res.data.userBg);
                //更新上传后的背景图像
                this.findMy();
            })
            },
        //修改昵称
        updateNickName(nickName) {
            this.flag=true;
            this.axios({
                method: 'post',
                url: '/updateNickName',
                data: {
                    nickName 
                }
            }).then(res=>{
                // 
                this.nickName=res.data.nickName;
                if(res.data.code=='C001') {
                    this.$toast(res.data.msg);
                    this.findMy();
                }
            })
        }, 
        //修改简介
        updateDesc(desc) {
            this.axios({
                method: 'post',
                url: '/updateDesc',
                data: {
                    desc
                }
            }).then(res=>{
                // 
                this.desc=res.data.desc;
                if(res.data.desc=="D001") {
                    this.$toast(res.data.msg);
                    this.findMy();
                }
            })
        } ,
        //获取我的资料
        findMy() {
            this.axios({
                method: 'get',
                url: '/findMy',
            }).then(res=>{
                // 
                //用户未登录时
                if(res.data.code==700) {
                    this.$toast('登录一下查看您的个人中心');
                    //跳转到登录页面 (注意将url加入js白名单中)
                   setTimeout(()=>{
                       this.$router.push({name:'Login'});
                   },2000);
                }
                //查询我的成功
                if(res.data.code=='A001') {
                    if(res.data.result[0].desc=='') {
                        res.data.result[0].desc=this.desc;
                    }
                    this.myArray=res.data.result;
                    this.nickName=res.data.result[0].nickName;
                    this.desc=res.data.result[0].desc;
                    // 
                    let myheadpic=res.data.result[0].userImg;
                    let nickName=res.data.result[0].nickName;
                    this.$store.commit('setMyHead',{myheadpic,nickName});


                }
            })
        },
        // 个人资料跳转
        jumpInfo() {
            this.$router.push({name:'Personal'});
        },
        //我的收藏跳转
        jumpCollect() {
            this.$router.push({name:'MyCollect'});
        },
        //地址管理跳转
        jumpSite() {
            this.$router.push({name:'AddressList',params:{id:Math.random()*10}});
        },
        //我的订单跳转
        jupmOrder() {
                this.$router.push({name:'MyOrder'});
        },
        //安全中心跳转
        jupmInstall() {
            this.$router.push({name: 'Install'});
        },
        //登录
        login() {
            this.$router.push({name:'Login'});
        }
    }
}
</script>

<style lang='less' scoped>
@import url("../assets/base.less");
.back-nav-box {
    height:50px;
    width:100%;
    position: sticky;
    top: 0;
    color: @mainColor;
    background-color:#F7F8FA;
    border-bottom: 1px solid #e7e7e7;
    .back-nav{
        height:50px;
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
        font-size:16px;
        align-items: center;
        .nav-middle{
            color:black;
        }
    }
  }
.ipt-desc {
    border:1px solid #e8e8e8;
    outline:none;
    background-color: rgba(255,255,255,0.4);
}
.ipt-name {
    
    border:1px solid #e8e8e8;
    outline:none;
    background-color: rgba(255,255,255,0.4);

}

.arrow {
    font-size: 25px;
    color:#999;
    margin-right: 5px;
}
.info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding:15px 0;
    font-size: 16px;
}
.install-box {
    border-bottom:0;
}
.my {
    background-color: #fff;
}
.my-info {
    display: flex;
    align-items: center;
    box-sizing:border-box;
}
.my-pic {
    width:70px;
    height:70px;
    align-self:start;
    position: relative;
    background-color: @bg_Color;
    border-radius:50%;
    overflow: hidden;
    .auto-img {
        position:absolute;
        left:0;
        top:0;
        z-index:9;
        height:100%;
    }
    
}

.pic {
    position: absolute;
    top:0;
    left:0;
    opacity:0;
}
.my-log {
    font-size: 16px;
    color:#666;
    margin-top:10px ;
    padding: 0 2px;
    border:1px solid rgba(0,0,0,.2);
    border-radius:5px;
    outline:0;
    background-color: rgba(255,255,255,0.4);

    
}

.my-name {
    font-weight: bold;
    font-size: 18px;
    color:@homehot;
    margin-top: -10px;
    border-radius:10px;
    overflow: hidden;
}
.my-title {
    flex:1;
    margin-left: 20px;
    align-self: start;
    margin-top: 10px;
}
.my-img {
    width:100%;
    height:200px;
    background-color: @bg_Color;
    overflow: hidden;
}
.auto-img {
    height: auto;
}
.select-img {
    width: 100%;
    height:200px;
    opacity:0;
    position:absolute;
    top:0;
    left:0;
}
.my-box {
    margin: 0 10px;
    padding: 10px;
    background-color: rgba(255,255,255,0.6);

    position: relative;
    top:-70px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

} 
.my-boxes {
    margin: 0 10px;
    padding: 10px;
    background-color: rgba(255,255,255,0.6);
    margin-bottom: 60px;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

} 
</style>